﻿<div class="row-toolbar">
    <button class="btn btn-toolbar" data-bind="click: createAlbumModal" >
        <i class="fa fa-plus fa-fw"></i> CREATE
    </button>
</div>

<div class="splitter-container">
    <div id="a" class="col-right">
        <div class="panel panel-default">
            <div class="panel-heading">Album list</div>
            <ul class="list-group" data-bind="foreach: albums">
                <li href="/" onclick="return false;" data-bind="attr: {id: AlbumId}, css: { active: IsActive }" class="list-group-item list-album-item">
                    <div class="wording" data-bind="click: function () { $parent.selectionChanged($data, $parent)} ">
                        <span class="list-group-item-heading" data-bind="text: Name"></span>
                        <h6 class="list-group-item-text">
                            <small data-bind="text: Description"></small>
                        </h6>
                    </div>

                    <div class="action">
                        <i class="fa fa-pencil-square-o" data-bind="click: $parent.updateAlbumModal"></i>
                        <i class="fa fa-trash-o" data-bind="click: $parent.deleteAlbumModal"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="b" class="col-left">
            

        <div data-bind="router: { cacheViews:false }"></div>

    </div>
</div>